<template>
    <rx-layout>
        <div slot="center">
            <div class="platformsAdc">
                <div class="platformsAdc-empty" v-if="platforms.length==0">
                    <img src="@/image/platforms_empty.png"></img>
                    <div class="platformsAdc-empty-text">
                        {{i18n('platformsAdcTip','暂无第三方集成，请按下方按钮添加哦') }}
                    </div>
                    <a-button style="margin-top: 32px" @click="add" type="primary">
                        {{i18n('isButton.addThirdPartyIntegration','添加第三方集成') }}
                    </a-button>
                </div>
                <div v-else>
                    <a-button style="margin-bottom: 10px" @click="add" v-show="platforms.length<4" type="primary">
                        {{i18n('isButton.addThirdPartyIntegration','添加第三方集成') }}
                    </a-button>
                    <div class="platformsAdd-list" v-for="(item,index) in platforms" :key="index">
                        <div class="platformsAdd-list-img"><img :src="item.img"></img></div>
                        <div class="platformsAdd-list-common">
                            <div>{{getName(item)}}</div>
                        </div>
                        <div v-if="item.type==syncorgType" @click="syncUserOrg(item.type)" class="platformsAdd-list-add">
                            <a>{{i18n('isButton.syncOrgBtn','同步组织架构') }}
                                ></a>
                        </div>
                        <div class="platformsAdd-list-add">
                            <a-switch v-model="item.enabled"  @change="changeStatus(item)"
                                      :checked-children="i18n('form.enable','启用')" :un-checked-children="i18n('form.disable','禁用')"></a-switch>
                        </div>
                        <div @click="particular(item)" class="platformsAdd-list-add">
                            <a>{{i18n('form.details','详情') }}
                                ></a>
                        </div>
                        <a-button @click="del(item)" type="danger" class="platformsAdd-list-add">{{$ti18('rxList.delBtn','删除')}}</a-button>
                    </div>
                </div>
            </div>
        </div>
    </rx-layout>
</template>

<script>
    import {Util} from "@lowcode/jpaas-common-lib";
    import platformsAdd from './platformsAdd';
    import PlatformsEdit from './PlatformsEdit'
    import PlatFormApi from '@/api/user/org/platForms';
    import SysSiteSettingApi from "@/api/system/core/sysSiteSetting";
    import OsUserSyncApi from "@/api/user/org/osUserSync";

    export default {
        name: "platformsAdc",
        components: {
            platformsAdd,
            PlatformsEdit
        },
        data() {
            return {
                platforms: [],
                platformId:"",
                list: [
                    {
                        name: this.i18n('form.WeChatGzh','微信公众号'),
                        id: 'WeChatGzh',
                        img: require('@/image/gzh.png'),
                    },{
                        name: this.i18n('form.weCom','企业微信'),
                        id: 'WeChat',
                        img: require('@/image/qiye.png'),
                    }, {
                        name: this.i18n('form.dingTalk','钉钉'),
                        id: 'dingding',
                        img: require('@/image/dingding.png'),
                    }, {
                        name: this.i18n('form.lark','飞书'),
                        id: 'feishu',
                        img: require('@/image/feishu.png'),
                    }
                ],
                syncorgType:""
            }
        },
        created() {
            this.getData();
            this.getConfig();
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"platForms",key);
            },
            syncUserOrg(syncorgType) {
                var key = "syncUserOrg";
                this.$message.loading({content: this.i18n('Synchronizing','正在同步组织架构和用户，请稍候...'), key});
                OsUserSyncApi.syncOrgUser(syncorgType).then(res => {
                    if (res.success) {
                        this.$message.success({content: this.i18n('SyncSuccess','同步组织架构成功'), key, duration: 2});
                    }
                });
            },
            getStatus(item){
              return item.enabled==='true';
            },
            getData(){
                var self_=this;
                PlatFormApi.getByCurrentTenantId().then(res =>{
                    if(!res || res.length==0){
                        return;
                    }
                    for(let i=0;i<res.length;i++){
                        let obj=res[i];
                        var newPlatForm={
                            pkId:obj.id,
                            type:obj.type,
                            setting:JSON.parse(obj.setting),
                            enabled:obj.enabled ==='true'
                        }
                        self_.platforms.push(newPlatForm);
                    }
                });
            },
            getConfig() {
                let self_=this;
                SysSiteSettingApi.getSysSiteSetting().then((res) => {
                    if (!res.success || !res.data || !res.data.confs) {
                        return;
                    }
                    let confs = JSON.parse(res.data.confs);
                    if(confs.syncorgType) {
                        self_.syncorgType = confs.syncorgType;
                    }
                })
            },
            getName(item) {
                let obj = this.list.find(row => {
                    return item.type == row.id;
                });
                if (!obj) {
                    return this.i18n('form.noMatches','没有匹配！')
                }
                return obj.name;
            },
            add() {
                Util.open({
                    component: platformsAdd,
                    curVm: this,
                    widthHeight: ['750px', '500px'],
                    title: this.i18n('isButton.addThirdPartyIntegration','添加第三方集成'),
                    data: {
                        platformId:this.platformId,
                        platforms: this.platforms
                    }
                }, function (action, data) {
                    if (action != 'ok') {
                        return;
                    }
                });

            },
            changeData(type, data) {
                var setting = data.setting;
                var newPlatForm={
                    pkId:data.pkId,
                    type:type,
                    setting:setting,
                    enabled: true
                }

                if (this.platforms.length == 0) {
                    this.platforms.push(newPlatForm);
                    return;
                }
                let obj = this.platforms.find(row => {
                    return type == row.type;
                });
                if (!obj) {
                    this.platforms.push(newPlatForm);
                    return;
                }
                obj.pkId = data.pkId;
                obj.setting = setting;
            },
            //详情
            particular(item) {
                var self_ = this;
                let obj = this.list.find(row => {
                    return item.type == row.id;
                });
                Util.open({
                    component: PlatformsEdit,
                    curVm: this,
                    title: obj.name + '-' + this.i18n('form.details','详情'),
                    max: true,
                    data: {
                        typeId: item.type,
                        platforms: this.platforms
                    }
                }, function (action, data) {
                    if (action != 'ok') {
                        return;
                    }
                    self_.changeData(item.type, data);
                });
            },
            del(item){
                let self_ = this;
                this.$confirm({
                    title: this.$ti18('rxMsa.masWarn.delInfo', '警告'),
                    content: this.i18n('delTip','确定要删除此配置吗？'),
                    okText: this.$ti18('rxForm.ackBtn', '确认'),
                    cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                    zIndex: 20000,
                    onOk() {
                        PlatFormApi.delete({ids:item.pkId}).then(res=>{
                            self_.platforms = []
                            self_.getData()
                        })
                    },
                    onCancel() {},
                });

            },
            changeStatus(item){
                var tip = this.i18n("disableSuccess","禁用成功")
                if (item.enabled){
                    tip = this.i18n("enableSucces","启用成功")
                }
                PlatFormApi.update({id:item.pkId , enabled: item.enabled}).then(res=>{
                    this.$message.success(tip)
                })
            }

        },
    }
</script>

<style scoped>
    .platformsAdc {
        padding: 10px 20px;
    }

    .platformsAdc-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;
    }

    .platformsAdc-empty img {
        margin-top: 48px;
    }

    .platformsAdc-empty-text {
        font-size: 14px;
        color: #dedede;
    }

    .platformsAdd-list {
        width: 100%;
        display: flex;
        height: 80px;
        align-items: center;
        border: 1px solid #dddddd;
        margin-bottom: 10px;
    }

    .platformsAdd-list-common {
        flex: 1;
    }

    .platformsAdd-list-img {
        margin-left: 24px;
        margin-right: 10px;
    }

    .platformsAdd-list-add {
        margin-right: 24px;
    }

    .platformsAdd-list-common div:nth-child(1) {
        font-size: 14px;
        color: #333333;
        font-weight: bold;
    }
</style>